<template>
  <main id="main">
    <section class="scroll-wrap">
      <el-carousel height="400px">
        <el-carousel-item v-for="(item, index) in scrollList" :key="index">
          <div class="carousel-text-wrap">
            <span>{{ item.text }}</span>
            <time>{{ item.date }}</time>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <section class="inform">
      <div class="left">
        <h1 class="title">
          <i class="el-icon-edit-outline" style="color: #ec6300;"></i>
          <a href="#">公示公告</a>
        </h1>
        <ul>
          <li v-for="(item, index) in noticeList" :key="index">
            <a :href="item.link">{{ item.text }}</a>
            <time>{{ item.date }}</time>
          </li>
        </ul>
      </div>
      <div class="right">
        <h1 class="title">
          <span class="iconfont icon-inform" style="color: #388ec4;">&#xe6e9;</span>
          <a href="#">学院通知</a>
        </h1>
        <ul>
          <li v-for="(item, index) in messageList" :key="index">
            <a :href="item.link">{{ item.text }}</a>
            <time>{{ item.date }}</time>
          </li>
        </ul>
      </div>
    </section>
    <section class="inform-more">
      <div class="inform-more-wrap">
        <div class="item">
          <div class="title-wrap">
            <h1 class="title">学院新闻</h1>
          </div>
          <ul>
            <li v-for="(item, index) in newsList" :key="index">
              <a :href="item.link">{{ item.text }}</a>
              <time>{{ item.date }}</time>
            </li>
          </ul>
        </div>
        <div class="item">
          <div class="title-wrap">
            <h1 class="title">建党工作</h1>
          </div>
          <ul>
            <li v-for="(item, index) in partyList" :key="index">
              <a :href="item.link">{{ item.text }}</a>
              <time>{{ item.date }}</time>
            </li>
          </ul>
        </div>
        <div class="item">
          <div class="title-wrap">
            <h1 class="title">团学工作</h1>
          </div>
          <ul>
            <li v-for="(item, index) in Group_learningList" :key="index">
              <a :href="item.link">{{ item.text }}</a>
              <time>{{ item.date }}</time>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <section class="teacher">
      <h1 class="title">教 / 师 / 风 / 采</h1>
      <div class="wrap">
        <div class="item" v-for="(item, index) in teacherList" :key="index">
          <img :src="item.src" width="275" height="160" />
          <div>
            <span class="label">"{{ item.label }}"</span> ——
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </section>

    <section class="student">
      <h1 class="title">优 / 秀 / 学 / 生</h1>
      <div class="wrap">
        <div class="item" v-for="(item, index) in studentList" :key="index">
          <img :src="item.src" width="275" height="160" />
          <div>
            <span class="label">"{{ item.label }}"</span> ——
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
// import moduleName from "~/";
export default {
  // components: {
  //   Logo
  // }
  layout: "index",
  data() {
    return {
      // 轮播图数据
      scrollList: [
        {
          img: "",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        },
        {
          img: "",
          text: "计算机科学与工程学院开展《厉害了我的国》观影主题教育活动",
          date: "2019-9-9",
          link: ""
        }
      ],
      // 公示公告数据
      noticeList: [
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" }
      ],
      // 学院通知数据
      messageList: [
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" }
      ],
      // 学院新闻数据
      newsList: [
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        }
      ],
      // 建党工作数据
      partyList: [
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        }
      ],
      // 团学工作数据
      Group_learningList: [
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        }
      ],
      // 教师风采数据
      teacherList: [
        { src: "", label: "课程育人", name: "蒋喆" },
        { src: "", label: "课程育人", name: "马莉" },
        { src: "", label: "服务育人", name: "黄月华" },
        { src: "", label: "实践育人", name: "陈艳" }
      ],
      // 优秀学生数据
      studentList: [
        { src: "", label: "优秀学生", name: "小明" },
        { src: "", label: "优秀学生", name: "小红" },
        { src: "", label: "优秀学生", name: "小李" },
        { src: "", label: "优秀学生", name: "张三" }
      ]
    };
  }
};
</script>

<style scoped lang="less">
#main {
  .scroll-wrap {
    width: 100%;
    height: 400px;
    background-color: pink;
  }

  /deep/ .el-carousel {
    width: 1200px;
    left: calc((100% - 1200px) / 2);
    right: calc((100% - 1200px) / 2);
    .el-carousel__indicators {
      left: 1010px;
      bottom: 20px;
    }
  }

  /deep/ .el-carousel__container {
    width: 900px;
  }

  .el-carousel__item {
    overflow: visible;
    .carousel-text-wrap {
      position: relative;
      font-size: 20px;
      width: 300px;
      height: 100%;
      background-color: #2c3338;
      left: 900px;
      padding: 40px 40px 0 40px;
      box-sizing: border-box;
      color: rgb(224, 217, 217);
      time {
        display: block;
        padding-top: 20px;
        font-size: 16px;
      }
    }
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .inform {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    li {
      margin-bottom: 30px;
    }
    li:nth-child(1) {
      margin-top: 30px;
    }
    a {
      color: #2c3338;
    }
    time {
      color: rgb(189, 180, 180);
      float: right;
      margin-right: 90px;
    }
  }

  .inform-more {
    width: 100%;
    padding: 50px 0 50px;
    background-color: #bdb4b4;
    .inform-more-wrap {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      justify-content: space-around;
      .item {
        width: 350px;
        background-color: skyblue;
        .title-wrap {
          color: #fff;
          background-color: #333;
          font-size: 30px;
          height: 150px;
          text-align: center;
          line-height: 150px;
          box-sizing: border-box;
          h1 {
            margin: 0;
          }
        }
        li {
          margin-bottom: 20px;
          padding: 0 30px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          a {
            color: #2c3338;
            font-size: 16px;
          }
          &:nth-child(1) {
            margin-top: 20px;
          }
          time {
            display: block;
            color: #bdb4b4;
          }
        }
      }
    }
  }

  .teacher,
  .student {
    width: 1200px;
    margin: 0 auto;
    h1 {
      text-align: center;
    }
    .wrap {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .item {
        width: 275px;
        height: 220px;
        div {
          height: 60px;
          width: 100%;
          text-align: center;
          line-height: 60px;
        }
      }
    }
  }
}
</style>
